@use '../core' as *;

.stringEditor {
    width: 100%;
}

.numberEditor {
    display: flex;
    margin-top: 0.5em;
    width: 100%;

    .slider {
        flex-grow: 1;
        margin-right: $spacing-size-4;
        vertical-align: middle;
        accent-color: var(--color-link);

        &_hidden {
            visibility: hidden;
        }
    }

    input {
        width: 15%;
        min-width: 4.5em;
    }

    span {
        position: relative;
        top: 6px;
    }
}

.presetEditor {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-size-1 $spacing-size-4;
    margin-bottom: $spacing-size-2;
    padding-left: $spacing-size-1;
    padding-right: $spacing-size-1;

    label {
        cursor: pointer;
    }

    input {
        margin-right: $spacing-size-1;
    }

    span {
        position: relative;
        top: -2px;
        transition: color $transition-default-timing;
    }
}

.colourEditor {
    margin-top: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $spacing-size-4;

    .inputWrapper {
        position: relative;
    }

    input {
        width: 100%;
        padding-right: $spacing-size-6;
    }

    .sample {
        position: absolute;
        width: 1em;
        height: 1em;
        border: solid 1px black;
        top: calc(50% - 0.5em);
        right: 1em;
    }

    .slider {
        flex-grow: 1;

        &:last-child {
            margin-right: $spacing-size-2;
        }
    }

    // override default react-color slider styles
    :global(.hue-picker),
    :global(.alpha-picker) {
        height: 8px;
        cursor: pointer;
    }

    // override default react-color slider styles
    :global(.hue-horizontal),
    :global(.alpha-picker) > div > div {
        border-radius: 4px;
    }

    // override default react-color slider styles
    :global(.hue-horizontal) > div > div,
    :global(.alpha-picker) > div > div:last-child > div > div {
        transform: translate(-9px, -5px);
    }
}
